<template>
  <div id="app">
    <div class="count-box">
      <div v-for="day in holidays()" :key="day.label" style="margin-bottom:20px;">
        <el-card shadow="hover" style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>{{ day.label }}</span>
          </div>
          <el-statistic ref="statistic" @finish="hilarity(day)" format="DD天HH小时mm分钟ss秒" :value="day.deadline"
                        title="距离放假："
                        time-indices>
          </el-statistic>
        </el-card>
      </div>
    </div>
    <div class="text-box">
      <div>
        <div class="text-fn">
          <div style="width:50%;">
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
              <el-select v-model="select" slot="prepend" :default-first-option="true" placeholder="请选择">
                <el-option label="标题" value="title"></el-option>
                <el-option label="内容" value="context"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="openData">添加</el-button>
            <el-button type="primary" @click="initData">初始化</el-button>
          </div>
        </div>
        <div style="height: 500px;overflow: auto;">
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total.sync="pageOption.total"
                         :page-sizes.sync="pageOption.pageSizeArr" :page-size="pageOption.size"
                         :current-page.sync="pageOption.pageNow" @size-change="sizeChange"
                         @current-change="currentChange"></el-pagination>
          <el-timeline>
            <el-timeline-item :timestamp="item.date" placement="top" style="text-align: left;"
                              v-for="(item) in dataList" :key="item.id">
              <el-card>
                <div slot="header" class="clearfix">
                  <div style="display:flex;align-items: center;">
                    <div>
                      <el-tag :type="status.filter(s => s.value ==item.state)[0].type">{{
                          status.filter(s => s.value == item.state)[0].label
                        }}
                      </el-tag>
                    </div>
                    <span>#{{ item.id }}#</span>
                    <span style="margin-left:8px;">{{ item.title }}</span>
                  </div>
                  <div>
                    <el-button type="text" @click="openEdit(item)">编辑</el-button>
                    <el-button type="text" style="color:#f00;" @click="deleteData(item.id)">删除</el-button>
                  </div>
                </div>
                <p>内容：{{ item.context }}</p>
                <p>责任人：{{ findDic(personList, item.person) }}</p>
                <p>
                  <span style="color: limegreen">创建时间：{{ item.createdAt|fitTime }}</span>
                  <span style="color: orange;margin-left: 10px;">更新时间：{{ item.updatedAt|fitTime }}</span>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-empty description="暂无数据" v-if="!dataList.length"></el-empty>
        </div>
        <div class="count-box">
          <div style="margin-bottom:10px;">
            <el-card shadow="none" style="width: 100%;">
              <div slot="header" class="clearfix">
                <span>正式服</span>
              </div>
              <div class="count-box-row">
                <div class="custom-btn btn1" @click="openLink(item)" v-for="(item,i) in production" :key="i">
                  <span>{{ item.label }}</span>
                </div>
              </div>
            </el-card>
          </div>
          <div>
            <el-card shadow="none" style="width: 100%;">
              <div slot="header" class="clearfix">
                <span>测试服</span>
              </div>
              <div class="count-box-row">
                <div class="custom-btn btn1" @click="openLink(item)" v-for="(item,i) in build" :key="i">
                  <span>{{ item.label }}</span></div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <!-- 添加 -->
      <el-dialog title="添加" :visible.sync="dialogFormVisible">
        <el-form :model="editForm" ref="ruleForm" :rules="ruleForm">
          <el-form-item label="ID" :label-width="formLabelWidth">
            <el-input v-model="editForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth" prop="title">
            <el-input v-model="editForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth" prop="text">
            <el-input v-model="editForm.context" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="责任人" :label-width="formLabelWidth" prop="person">
            <el-select v-model="editForm.person">
              <el-option v-for="item in personList" :key=item.code :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth" prop="status" style="text-align: left;">
            <el-radio-group v-model="editForm.state">
              <el-radio :label="item.value" v-for="item in status" :key="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--          <el-form-item label="时间" :label-width="formLabelWidth">-->
          <!--            <el-input v-model="editForm.updatedAt" disabled></el-input>-->
          <!--          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveData">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <!--    <el-dialog title="编辑" :visible.sync="dialogFormEdit">-->
      <!--      <el-form :model="editForm" ref="editFormRef">-->
      <!--        <el-form-item label="ID" :label-width="formLabelWidth">-->
      <!--          <el-input v-model="editForm.id" disabled></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="名称" :label-width="formLabelWidth" prop="title">-->
      <!--          <el-input v-model="editForm.title" autocomplete="off"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="内容" :label-width="formLabelWidth" prop="text">-->
      <!--          <el-input v-model="editForm.context" autocomplete="off"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="责任人" :label-width="formLabelWidth" prop="person">-->
      <!--          <el-input v-model="editForm.person" autocomplete="off"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="状态" :label-width="formLabelWidth" prop="status" style="text-align: left;">-->
      <!--          <el-radio-group v-model="editForm.state">-->
      <!--            <el-radio :label="item.value" v-for="item in status" :key="item.value">{{ item.label }}</el-radio>-->
      <!--          </el-radio-group>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="时间" :label-width="formLabelWidth">-->
      <!--          <el-input v-model="editForm.date" disabled></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogFormEdit = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="saveData">确 定</el-button>-->
      <!--      </div>-->
      <!--    </el-dialog>-->
    </div>
  </div>
</template>

<script>
import {test, saveData, pageRecord, getRecord, delRecord, mapDictionary} from "@/api";
import dayjs from "dayjs";

export default {
  name: 'App',
  components: {},
  filters: {
    fitTime(val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      input: null,
      select: null,
      dialogFormVisible: false,
      dataList: [],
      personList: [],
      pageOption: {
        pageSizeArr: [5, 10, 20, 50],
        total: 0,
        size: 5,
        pageNow: 1,
      },
      editForm: {
        id: null,
        title: null,
        context: null,
        person: null,
        state: 1,
        createdAt: null,
        updatedAt: null,
      },
      ruleForm: {
        title: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        context: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        state: [
          {required: true, message: '请选择', trigger: 'blur'}
        ],
      },
      formLabelWidth: '120px',
      status: [
        {label: '新建', value: 1, type: ''},
        {label: '待验证', value: 2, type: 'warning'},
        {label: '重新打开', value: 3, type: 'info'},
        {label: '已解决', value: 4, type: 'success'},
        {label: '未解决', value: 5, type: 'danger'},
      ],
      holiday: [
        {label: '劳动节', deadline: new Date("2024-04-30 12:00:00")},
        {label: '端午节', deadline: new Date("2024-06-07 12:00:00")},
        {label: '中秋节', deadline: new Date("2024-09-14 12:00:00")},
        {label: '国庆节', deadline: new Date("2024-09-30 12:00:00")}
      ],
      production: [
        {label: '建管家', url: 'https://www.jiangongdata.com/'},
        {label: '抢工程', url: 'http://businessclient.jiangongdata.com/'},
        {label: '找资质（外网）', url: 'https://qualification.jiangongdata.com/'},
        {label: '找资质（内部）', url: 'https://jgj-qual.kailinjt.com/login?type=login'},
        {label: '查业主', url: 'https://owner.jiangongdata.com/login?type=login'},
      ],
      build: [
        {label: '建管家', url: 'https://front-jian-butler-seo-test.kailinesb.com/'},
        {label: '抢工程', url: 'https://front-jian-business-web-test.kailinesb.com/'},
        {label: '找资质', url: 'http://front-qualified-web-test.kailinesb.com/login?type=login'},
        {label: '查业主', url: 'https://front-owner-web-test.kailinesb.com/login?type=login'},
        {label: '建管家网关服务', url: 'https://jian-butler-gateway-test.kailinesb.com/doc.html#/home'},
        {label: '找资质网关服务', url: 'https://jian-butler-gwquals-test.kailinesb.com/doc.html#/home'},
        {label: '查业主网关服务', url: 'https://jian-butler-gwowner-test.kailinesb.com/doc.html#/home'},
      ]
    }
  },
  created() {

  },
  mounted() {
    this.comFun();
    this.search();
  },
  methods: {
    holidays() {
      let now = dayjs().subtract(30, 'm');
      let res = this.holiday.filter(f => {
        return f.deadline > now;
      });
      return res;
    },
    hilarity(row) {
      this.$notify({
        title: "提示",
        dangerouslyUseHTMLString: true,
        message: '<span style="color:limegreen;">' + row.label + "</span>时间到啦！放假咯！",
        duration: 5000,
      });

    },
    initData() {
      this.select = null
      this.input = null
      this.dataList = [];
      this.search()
    },
    openData() {
      this.dialogFormVisible = true
      this.clearObject(this.editForm);
    },
    clearObject(obj) {
      if (obj) {
        let arr = ['pageNow', 'size'];
        Object.keys(obj).forEach(k => {
          if (arr.indexOf(k) < 0) {
            obj[k] = null;
          }
        })
      }
    },
    saveData() {
      let me = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          saveData(this.editForm).then(res => {
            if (res.success) {
              me.dialogFormVisible = false;
              me.$message.success("操作成功！");
            } else {
              me.$message.error(res.message);
            }
          }).finally(() => {
            me.search();
          });
        }
      });
    },
    openEdit(item) {
      this.editForm = {};
      this.getOne(item.id);
      this.dialogFormVisible = true
    },
    getOne(id) {
      let me = this;
      getRecord({id}).then(res => {
        if (res.success) {
          this.editForm = res.data;
        } else {
          me.$message.error(res.message);
        }
      }).finally(() => {
      });
    },
    deleteData(id) {
      // let arr = _.cloneDeep(JSON.parse(localStorage.getItem('dailyLogData')))
      // this.dataList = arr.filter(item => item.id != id);
      // localStorage.setItem('dailyLogData', JSON.stringify(this.dataList))
      let me = this;
      me.$confirm('确定删除？数据无法恢复！', '删除', {type: "warning"}).then(() => {
        delRecord({id: id}).then(res => {
          if (res.success) {
            me.$message.success(res.message);
          } else {
            me.$message.error(res.message);
          }
        }).finally(() => {
          me.search();
        });
      }).catch(() => {
      });
    },
    search() {
      if (!!this.input && !this.select) {
        this.$message({
          message: '请先选择一个类目',
          type: 'warning',
          duration: 1000,
        });
      } else {
        this.pageOption.pageNow = 1;
        this.searchData();
      }
    },
    openLink(item) {
      window.open(item.url)
    },
    searchData() {
      let par = Object.assign({}, this.pageOption);
      if (this.select) {
        par[this.select] = this.input;
      }
      pageRecord(par).then(res => {
        if (res.success) {
          this.dataList = res.data.row;
          this.pageOption.total = res.data.total;
          this.pageOption.size = res.data.size;
        } else {
          this.$message.error(res.message);
        }
      }).finally(() => {
      });
    },
    sizeChange(val) {
      this.pageOption.size = val;
      this.search();
    },
    currentChange(val) {
      this.pageOption.pageNow = val;
      this.searchData();
    },
    comFun() {
      test().then((res) => {
        this.$notify({
          title: '成功',
          message: res.data,
          type: 'success',
          duration: 1000,
        });
      });
      mapDictionary({code: [1], tree: true}).then((res) => {
        if (res.success) {
          this.personList = res.data['1'].children;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    findDic(listDic, code) {
      if (!listDic || listDic.length < 1) return null;
      let t = listDic.find(f => f.code == code);
      return t.name;
    },
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 15px;
  display: flex;
}

.count-box {
  display: flex;
  flex-direction: column;
}

.count-box-row {
  display: flex;

}

.el-select .el-input {
  min-width: 100px;
}

.text-fn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.text-box {
  width: 1200px;
  margin: 0 auto;
}

.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-btn {
  width: 130px;
  height: 30px;
  line-height: 30px;
  color: #000;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
  margin-bottom: 20px;
}

.btn1 {
  &:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    transition: all 0.3s ease;
  }
}
</style>